<template>
	<view>
		<Header></Header>

		<view class="middle" v-if="middleReveal">
			<Tabs></Tabs>
			<Category v-if="categoryReveal"></Category>
			<Shops v-if="shopsReveal"></Shops>
		</view>

		<Shopdetail v-if="shopDetailReveal"></Shopdetail>
	</view>
</template>

<script>
	import header from '@/components/header/header.vue';
	import tabs from '@/components/tabs/tabs.vue';
	import category from '@/components/category/category.vue';
	import shops from '@/components/shops/shops.vue';
	import shopdetail from '@/components/shopdetail/shopdetail.vue';
	import {
		listAudios
	} from '@/api/index/index.js';
	export default {
		components: {
			header,
			tabs,
			category,
			shops,
			shopdetail
		},
		data() {
			return {
				videoPrefixL: process.env.VUE_APP_VIDEO_BASE_URL,
				audioList: [],
				currentAudioIndex: 0,
			}
		},
		created() {
			this.listAudios()
		},
		methods: {
			listAudios() {
				listAudios({
					audioType: 1,
					status: '0'
				}).then(res => {
					this.audioList = res.data.content
					this.playSound()
				})
			},
			playSound() {
				const audioContext = uni.createInnerAudioContext(); // 创建音频上下文
				// 设置音频地址
				audioContext.src = this.videoPrefixL + parseInt(this.audioList[this.currentAudioIndex].url);
				// 监听音频播放结束事件，在播放结束后切换到下一首音频
				audioContext.onEnded(() => {
					this.currentAudioIndex = (this.currentAudioIndex + 1) % this.audioList.length;
					this.playSound();
				});
				audioContext.play(); // 播放声音
			},
		},
		computed: {
			middleReveal() {
				return this.$store.state.middleReveal;
			},
			categoryReveal() {
				return this.$store.state.categoryReveal;
			},
			shopsReveal() {
				return this.$store.state.shopsReveal;
			},
			shopDetailReveal() {
				return this.$store.state.shopDetailReveal;
			}
		},
	}
</script>

<style lang="scss">
	@import "uview-ui/index.scss";

	.middle {
		width: 100%;
		height: 470.478rpx;
		display: flex;
		align-items: center;
		position: absolute;
		z-index: -1;
	}
</style>